<template>
  <div :id="tableId" style="cursor: default;padding: 8px 15px 0 15px;">
    <div class="table-header table-row">
      <div class="table-cell" style="width: 35%;">告警名称</div>
      <div class="table-cell" style="width: 15%; text-align: center;">类型</div>
      <div class="table-cell" style="width: 15%; text-align: center;">告警等级</div>
      <div class="table-cell" style="width: 15%; text-align: center;">告警标志</div>
      <div class="table-cell" style="width: 20%; text-align: right">发生时间</div>
    </div>
    <div class="table-body">
      <div :class="{ 'scroll-wrap': getPlayData.length > 0 }">
        <div
            class="table-row"
            :class="{
               'hasBgc': index % 2 === 0,
               'text-color-red':item.alarmLevel===1,
               'text-color-orange':item.alarmLevel===2,
               'text-color-yellow':item.alarmLevel===3,
               'text-color-blue':item.alarmLevel===4
               }"
            v-for="(item, index) in getPlayData"
            :key="index"
            :ref="'row_' + index">
          <div class="table-cell"
               style="width: 35%"
               :title="item.alarmName">
            {{ item.alarmName }}
          </div>
          <div class="table-cell"
               style="width: 15%; text-align: center;"
               :title="item.alarmTypeNmae||item.alarmType">
            {{ item.alarmTypeNmae||item.alarmType }}
          </div>
          <div class="table-cell"
               style="width: 15%; text-align: center;"
               :title="item.levelStr">
            {{ item.levelStr }}
          </div>
          <div class="table-cell"
               style="width: 15%; text-align: center;"
               :title="item.clearStr">
            {{ item.clearStr }}
          </div>
          <div
              class="table-cell"
              style="width: 20%; text-align: right;"
              :title="item.timeStr">
            {{ item.timeStr }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableId: {
      type: String,
      default: "table1",
    },
  },
  data() {
    return {
      initMt: 0,
      // getPlayData:[],
      visible: true,
      stop: false,
    };
  },
  methods: {
    play() {
      const row = this.$refs.row_0[0];
      setTimeout(() => {
        this.visible = false;
        this.$nextTick(() => {
          this.initMt++;
          if (this.initMt === this.data.length) {
            this.initMt = 0;
          }
          this.visible = true;
        });
        this.play();
      }, 2000);
    },
  },
  watch: {},
  computed: {
    getPlayData() {
      return this.data.concat(this.data.slice(0, 4));
    },
  },
  mounted() {
    this.play();
  },
};
</script>
<style lang="less" scoped>
  @cellHeight: 35px;
  @red:#ff5757;
  @yellow:yellow;
  @orange:#f7903d;
  @blue:#2aef8a;
  @gray:gray;

  .table-row {
    display: flex;
    line-height: 35px;
    height: 35px;
    transition: all 0.3s;
    border-bottom: 1px solid rgba(63, 88, 114, 1);
    padding: 0 5px;
  }

  .table-header {
    color: rgba(87, 150, 190, 1);
  }

  .table-cell {
    text-align: left;
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 5px;
    /*text-align: center;*/
  }


  // .hasBgc {
  //   background: rgb(0, 59, 81);
  // }
  .hidden-row {
    height: 0 !important;
    line-height: 0 !important;
    display: none !important;
  }

  .table-body {
    height: 200px;
    overflow-y: hidden;

    .table-row {
      color: #fff;
    }

    .text-color-red {
      color: red;
    }

    .text-color-orange {
      color: orange;
    }

    .text-color-yellow {
      color: yellow;
    }

    .text-color-blue {
      color: #1aff78;
    }
  }

  .scroll-wrap {
    // steps(18)
    animation: scroll 18s linear infinite;
    position: relative;
  }

  .scroll-wrap:hover {
    animation-play-state: paused;
  }

  @keyframes scroll {
    from {
      top: 0;
    }
    to {
      top: -8 * @cellHeight;
    }
  }
</style>
